<template>
	<view>
		<nav-box title="学习资料">
			<text v-show="current == 1 && list.length > 0" @click="editList">{{ editState ? '完成' : '管理' }}</text>
			<text v-show="current == 2 && list.length > 0" @click="editList">{{ editState ? '完成' : '添加收藏' }}</text>
		</nav-box>
		<view class="content">
			<view class="tab-box">
				<view class="tab-item" :class="current == 1 ? 'active' : ''" @click="tabChange(1)">我的收藏</view>
				<view class="tab-item" :class="current == 2 ? 'active' : ''" @click="tabChange(2)">全部资料</view>
			</view>
			<view class="list-box">
				<!-- 返回上一层 -->
				<view class="prev-box" v-show="pageCurrent > 1" @click="prev">
					<image src="../../static/images/left_icon.png" mode=""></image>
					<text>返回上一层</text>
				</view>
				<view v-show="editState">
					<u-checkbox-group @change="checkboxGroupChange">
						<view class="item-box" v-for="(item, index) in list" :key="item.id">
							<u-checkbox :name="item.id" size="48" v-model="item.checked" shape="circle" @change="checkboxChange">
								<view class="label-box">
									<view class="label-box">
										<image :src="item.type == 1 ? '../../static/images/icon_4.png' : '../../static/images/icon_5.png'" mode="" class="u-m-r-20"></image>
										<view class="label-title">{{ item.title }}</view>
										<image src="../../static/images/forward.png" mode="" class="right-icon" v-show="item.type == 1 && !editState"></image>
									</view>
								</view>
							</u-checkbox>
						</view>
					</u-checkbox-group>
				</view>
				<view v-show="!editState">
					<view class="item-box" v-for="(item, index) in list" :key="item.id">
						<view class="label-box" @click="toDetail(item.id, item.type)">
							<image :src="item.type == 1 ? '../../static/images/icon_4.png' : '../../static/images/icon_5.png'" mode="" class="u-m-r-20"></image>
							<view class="label-title">{{ item.title }}</view>
							<image src="../../static/images/forward.png" mode="" class="right-icon" v-show="item.type == 1 && !editState"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer-box" v-show="editState">
			<u-checkbox size="48" v-model="allCheck" shape="circle" @change="checkedAll">全选</u-checkbox>
			<u-button shape="circle" :hair-line="false" hover-class="none" :custom-style="btnStyle" @click="operation">{{current == 1 ? '移除' : '收藏'}}</u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			btnStyle: {
				height: '40px',
				backgroundColor: '#2D6EFF',
				color: '#FFFFFF',
				marginRight: '0'
			},
			current: 1, //现在所在标签
			pageCurrent: 1, //目前页面层级
			prevIdList: [], //上一层文件夹id数组
			currentId: null, //所在文件夹id
			list: [],
			editState: false, //编辑状态
			allCheck: false, //全选状态
		};
	},
	onLoad() {
		this.list = [
			{
				id: 1,
				title: '第124套基础知识',
				type: 1, // 1文件夹 2单独文件
				checked:  false
			},
			{
				id: 2,
				title: '第123套基础知识',
				type: 1,
				checked:  false
			},
			{
				id: 3,
				title: '资料1',
				type: 2,
				checked:  false
			},
			{
				id: 4,
				title: '资料2',
				type: 2,
				checked:  false
			}
		];
	},
	methods: {
		// 顶部标签切换
		tabChange(key) {
			this.current = key;
			this.editState = false
		},
		// 编辑 全选状态和所有项的选择状态都取消
		editList() {
			this.editState = !this.editState
			this.allCheck = false
			this.list.map(val => {
				val.checked = false;
			});
		},
		// 选中某个复选框时，由checkbox时触发
		checkboxChange(e) {
			// console.log(e);
		},
		// 选中任一checkbox时，由checkbox-group触发
		checkboxGroupChange(e) {
			// console.log(e);
		},
		// 全选
		checkedAll() {
			this.list.map(val => {
				val.checked = !this.allCheck;
			});
		},
		// 文件夹详情 1文件夹 2文件
		toDetail(id, type) {
			// 进入到下一层目录 把目前的文件夹id放到id数组里
			if (type == 1) {
				this.currentId = id
				this.prevIdList.push(id)
				//type是文件夹走接口获取文件下的内容 页面层级增加
				this.pageCurrent++
				
			} else {
				// type是文件 直接预览
			}
		},
		// 返回上一层
		prev() {
			this.prevIdList.splice(this.prevIdList.length - 1, 1)
			this.pageCurrent--
			// 走接口获取当前资料列表 id用 this.prevIdList[this.pageCurrent - 1]
		},
		// 移除或者收藏操作
		operation() {
			if(this.current == 1) {
				// 移除
			} else {
				// 收藏
			}
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	padding-bottom: 110upx;
	background-color: #ffffff;
}
.empty-box {
	width: 100%;
	padding-top: 140upx;
	text-align: center;
	color: #949dae;
	image {
		width: 500upx;
		height: 500upx;
	}
}
.content {
	.tab-box {
		display: flex;
		.tab-item {
			width: 50%;
			box-sizing: border-box;
			height: 96upx;
			text-align: center;
			line-height: 96upx;
			color: #6e6e6e;
			position: relative;
			background-color: #fafafa;
		}
		.active {
			color: $color-2d6;
			font-size: 40upx;
			font-weight: 600;
			background-color: #ffffff;
			&::after {
				content: '';
				display: block;
				width: 16upx;
				height: 8upx;
				border-radius: 4upx;
				background-color: $color-2d6;
				position: absolute;
				left: 50%;
				bottom: 8upx;
				transform: translateX(-50%);
			}
		}
	}
	.list-box {
		background-color: #ffffff;
		padding: 40upx;
		.prev-box {
			padding: 10upx 0;
			display: flex;
			align-items: center;
			image {
				width: 48upx;
				height: 48upx;
			}
		}
		.change-box {
			display: flex;
			align-items: center;
			color: #6e6e6e;
			font-size: 24upx;
			margin-bottom: 18upx;
			padding-left: 40upx;
			image {
				width: 8upx;
				height: 20upx;
				margin-left: 8upx;
			}
		}
		.change-style {
			image {
				transform: rotate(180deg);
			}
		}

		.item-box {
			width: 100%;
			padding: 40upx 0;
			&:not(:last-child) {
				border-bottom: 2upx solid #f1f1f1;
			}
			image {
				width: 44upx;
				height: 44upx;
			}
			.label-box {
				display: flex;
				align-items: center;
				font-size: 32upx;
				color: #4b4b4b;
				.right-icon {
					width: 40upx;
					height: 42upx;
					margin-left: auto;
				}
			}
		}
	}
}
.footer-box {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	height: 100upx;
	border-top: 2upx solid #f1f1f1;
	background-color: #ffffff;
	padding: 0 40upx;
}
</style>
